<template>
  <div class="home-content">
    <h1 class="title">企业统计</h1>
    <div class="apply">
      <div class="header clearfloat">
        <el-date-picker
          class="fl"
          v-model="queryTime"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
        ></el-date-picker>
        <div class="fr right">
          <span>申报统计 （单位：件）</span>
          <span class="btn" @click="goOrder">查看详情</span>
        </div>
      </div>
      <div class="mian" id="applyChart"></div>
    </div>
    <div class="inventor">
      <div class="header clearfloat"></div>
      <div class="mian" id="inventorChart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "./esresize";
export default {
  data() {
    return {
      queryTime: [],
      paramsByOrder: {},
      orderData: {},
      inventorData: {},
      orderChartDOM: null,
      inventorChartDOM: null,
      orderDOM: null,
      inventorDOM: null
    };
  },
  mounted() {
    this.orderChartDOM = this.$echarts.init(document.getElementById("applyChart"))
    this.inventorChartDOM = this.$echarts.init(document.getElementById("inventorChart"))
  },
  created () {
    this.getOrderData()
    this.getInventorData()
  },
  methods: {
    orderChart(data) {
      var dataAxis = ["外观设计案件数", "发明专利案件数", "实用新型案件数", "授权案件数"]
      var data = [data.appearances, data.inventions, data.practicals, data.grants]
      // var yMax = 500
      var dataShadow = []
      this.orderDOM = document.getElementById("applyChart")
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          // formatter: '{c}',
          backgroundColor: "rgba(68,192,207,1)"
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            // show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
           axisPointer: {
            show: false,

          },

          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#999"
            }
          },
          axisPointer: {
            show: true,
            lineStyle: {
              type: "dashed"
            },
            label: {
              show: false
            }
          }
        },
        series: [
          {
            name: "案件数",
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4179EB" },
                // { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#46D9C6" }
              ]),
              barBorderRadius: [6, 7, 0, 0]
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4179EB" },
                  // { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#46D9C6" }
                ])
              }
            },
            barWidth: "15",

            data: data,
            
          }
        ],
        grid: {
          left: 40,
          top: 20,
          right: 20,
          bottom: 40
        }
      };
      this.orderChartDOM.setOption(option)
      let that = this
      let listener = function() {
        that.orderChartDOM.resize()
      };
      EleResize.on(this.orderDOM, listener)
    },
    setInventorChart(data) {
      let userName = []
      let orderCounts = []
      let finalCounts = []
      for (let i = 0; i < data.length; i++) {
        let name = data[i].name
        let orderCount = data[i].orders_count
        let finalCount = data[i].finals_count
        orderCounts.push(orderCount)
        finalCounts.push(finalCount)
        userName.push(name)
      }
      
      this.inventorDOM = document.getElementById("inventorChart")
      var dataShadow = []
      let option = {
        title: {
          text: "发明人统计 （单位：件）",
          textStyle: {
            color: "rgba(112, 112, 112, 1)",
            fontWeight: 400,
            fontSize: 15
          },
          right: 60,
          top: 15
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(68,192,207,1)"
        },
        legend: {
          data: [
            {
              name: "处理中案件总数",
              icon: "roundRect"
            },
            {
              name: "已申报专利总数",
              icon: "roundRect"
            }
          ],
          left: 50,
          top: 15
        },

        grid: {
          top: 50,
          left: 20,
          right: "10%",
          containLabel: true,
          borderColor: 'rgba(229,229,229,1)'
        },
        xAxis: {
          type: "value",
          splitLine:{ show:false },
          // show: false
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: userName,
          splitLine:{ show:false },
          axisTick: {
            show:false
          },
          axisLine: {
            show:false
          },
          // show: false
         
        },
        series: [
          {
            name: "处理中案件总数",
            type: "bar",
            data: orderCounts,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#0050E7" },
                { offset: 1, color: "#AFCBFF" }
              ]),
              barBorderRadius: [0, 4, 4, 0],
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(244,248,255,1)'
            },
            barWidth: "8",
            barGap : 0.5,
            barCategoryGap: 4
            
          },
          {
            name: "已申报专利总数",
            type: "bar",
            data: finalCounts,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: "#3FC19E" },
                { offset: 1, color: "#3CE0D8" }
              ]),
              barBorderRadius: [0, 4, 4, 0]
            },
            barWidth: "8",
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(244,248,255,1)'
            },
          }
        ],

        dataZoom: [
          //  {
          //   type: "inside",
          //   // start: 98,
          //   // end: 100,
          //   // yAxisIndex: [0]
          // },
          {
            show: true,
            type: "slider",
            start: 0,
            end: 35,
            yAxisIndex: [0]
          }
        ]
      };
      this.inventorChartDOM.setOption(option)
      let that = this
      let listener = function() {
        that.inventorChartDOM.resize()
      }
      EleResize.on(this.inventorDOM, listener)
    },
    goOrder () {
      this.$router.push({
        path: '/company/order',
      })
    },
    getOrderData (args) {
      let params = {
        guard: 'company'
      }
      params = {...params, ...this.paramsByOrder}
      if (args) {
        params = {...params, ...args}
      }
      // this.loading = true
      this.$axios.get('api/company/statistics', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          // if (this.tableData.length) {
          //   this.tableData = res.data.data
          // } else {
          //   this.tableData.push(res.data.data)
          // }
          // this.pageSize = res.data.page.per_page
          // this.total = 1
          // this.getMyinfo()
          this.orderData = res.data.data
          this.$nextTick ( () => {
            this.orderChart(this.orderData)
          })
        } else {
          // this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },
    getInventorData(args) {
      let params = {
        guard: 'company',
        paging: 2,
      }
      params = {...params, ...this.paramsByOrder}
      if (args) {
        params = {...params, ...args}
      }
      // this.loading = true
      this.$axios.get('api/company/user', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.inventorData = res.data.data
          // this.pageSize = res.data.page.per_page
          // this.total = res.data.page.total
          // this.getMyinfo()
          this.setInventorChart(this.inventorData)
        } else {
          this.loading = false
          this.$message.error('服务器繁忙')
        }
      })
    },
    timeChange(value) {
      let params = {
        time: value
      }
      this.getOrderData(params)
      this.getInventorData(params)
    }
  }
};
</script>

<style lang='less' scoped>
.home-content {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  padding: 30px 40px;
  box-sizing: border-box;

  .title {
    font-size: 20px;
    color: rgba(190, 190, 190, 1);
    font-weight: 400;
    margin-bottom: 30px;
  }

  .apply {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    height: 45%;
    .header {
      line-height: 40px;
      .el-date-editor {
        width: 350px;
      }

      .right {
        font-size: 15px;
        color: rgba(112, 112, 112, 1);
        .btn {
          color: rgba(65, 128, 232, 1);
          cursor: pointer;
        }
      }
    }
    .mian {
      width: 100%;
      // height: 350px;
      height: 100%;
    }
  }
  .inventor {
    height: 55%;

    .mian {
      width: 100%;
      height: 100%;
    }
  }

  // /deep/.chartTooltip {
  //   background: rgba(68, 192, 207, 1);
  //   color: #fff;
  //   font-size: 15px;
  //   text-align: center;
  //   height: 25px;
  //   line-height: 25px;
  // }
}
</style>